<template>
    <!-- <div class="TabbarBox"> -->
        
        <div class="Tabbar">
            <div class="item" 
            v-for="(item,index) in tabList" 
            :key="index+1" 
            @click="curTab(index)">
                <icon class="icon" 
                :class="[curindex == index ? 'curIcon' : '']"
                :eeui="{content:item.icon,fontSize:48}"
                ></icon>
                <text class="tit" :class="[curindex == index ?  'curText' : '']">{{item.text}}</text>
            </div>
        </div>
    <!-- </div> -->         
    
</template>
<script>
    const eeui = app.requireModule('eeui');
    export default {
        props:{
            curindex:{
                default:0
            },
            tabType:{
                default:false,
            }
        },
      data(){
          return{
              tabList:[
                  {text:'主页',icon:'tb-home-fill-light',pageType:false},
                  {text:'校园跑',icon:'md-filing',pageType:false},
                  {text:'我的',icon:'md-person',pageType:false}
                  ]
          }
      },
      methods:{
          curTab(index){
              
             //校园跑

                if(index == 0){
                    if(this.tabList[index].pageType){
                        return;
                    }
                    this.homePage(index);
                }else if(index == 1){
                    if(this.tabList[index].pageType){
                        return;
                    }
                    this.schoolRun(index);
                }else{
                    if(this.tabList[index].pageType){
                        return;
                    }
                    this.userpage(index);
                }            
          },
           //校园跑
            schoolRun(index){
                this.tabList[index].pageType = true;
                eeui.openPage({
                    url: 'runPages/schoolRun.js',
                    statusBarColor:'#1eb76e',
                    pageName:'校园跑',
                    animated:false,
                    params:{curindex:index}
                }, function(result) {
                    //......
                }); 
            },
            //用户
            userpage(index){
                this.tabList[index].pageType = true;
                eeui.openPage({
                    url: 'myPages/userInfoPage.js',
                    statusBarColor:'#1eb76e',
                    animated:false,
                    params:{curindex:index}
                }, function(result) {
                    //......
                }); 
            },
            //主页
             homePage(index){
                 this.tabList[index].pageType = true;
                eeui.openPage({
                    url: 'index.js',
                    statusBarColor:'#1eb76e',
                    animated:false,
                    params:{curindex:index}
                }, function(result) {
                    //......
                }); 
            }
      }
    }
</script>
<style scoped>
/* .TabbarBox{
    position:fixed;
    bottom:0;
    left:0;
    height:122px;
} */
.Tabbar{
    position:fixed;
    flex-direction:row;
    bottom:0;
    left:0;
    border-top-width: 1px;
    border-top-style:solid;
    border-top-color: rgba(0, 0, 0, 0.1);
    height: 100;
    padding-top: 10px;
    background-color: #fff;

}
.tit{
    text-align: center;
    font-size: 18;
}
 .icon {
        width: 250px;
        height: 40px;
        margin-bottom: 10;
        color: #666;
    }
    .curIcon{
        color: #1eb76e;
    }
    .curText{
        color: #1eb76e;
    }

</style>
